<template>
	<view>
		<u-popup customStyle=" width:40vh" :show="show" mode="right" @close="show=false" @open="show=true"
			:zoom="false">
			<view>
				<u-search :showAction="false" @search="search" v-model="keyword" actionText="搜索" :animation="true">
				</u-search>
				<u-cell-group>
					<u-cell :title="sline.Name" isLink icon="map" v-for="(sline,index1) in seachlist" :key="index1"
						@click="goline(sline.Latlng)">

					</u-cell>
				</u-cell-group>
			</view>
		</u-popup>
		
		<view style="position:fixed; left: 3vh; top: 2vh; z-index: 999; width:300px; height: 20px;" v-show="showLocate">
			<u-search placeholder="请输入经纬度" :showAction="true" actionText="定位"  :action-style="{color: 'black'}"
			@custom="toLocate" :clearabled="false"></u-search>
		</view>
		
		<view style="position:fixed; right: 3vh; top: 13vh; z-index: 999; width:80px; height: 40px;">
			<u-button type='primary' :plain="true" icon='search' @click="show=!show">查找
			</u-button>
		</view>

		<view style="position:fixed ;right: 3vh;top: 21vh;z-index: 999;width: 100px;">
			<u-button type='primary' :plain="true" v-if='islocated' @click="toggleSelect">添加线路点
			</u-button>
		</view>
		
		<view style="position:fixed ;right: 3vh;top: 29vh;z-index: 999;width: 80px;">
			<u-button type='primary' :plain="true"  @click="showLegends = true">图例
			</u-button>
		</view>
		
		<view style="position:fixed ;right: 3vh;top: 37vh;z-index: 999;width: 80px;">
			<u-button type='primary' :plain="true"  @click="showLocate = !showLocate">定位
			</u-button>
		</view>
		
		<view style="position:fixed ;right: 28vh;top: 87vh;z-index: 999;width: 80px;">
			<u-text :text="showLongitude" size="13"></u-text>
			<u-text :text="showLatitude" size="13"></u-text>
		</view>
		
		<view style="z-index: 999; position:fixed; right: 3vh; top: 88vh; background-color: aliceblue;"
			v-show="!isloading">
			<u-image src="https://project.gxrunxiang.com/cdn/localize.png" width="35px" height="35px" @click="setLocation"></u-image>
		</view>
		<view style="z-index: 999; position:fixed; right: 3vh; top: 88vh; " v-show="isloading">
			<u-loading-icon></u-loading-icon>
		</view>


		<map id="maps" style="width: 100%; height: 99vh;" :latitude="latitude" :longitude="longitude" :markers="markers"
			:scale="scale" @markertap="clickMarker" :enable-satellite="isimage" :show-scale="true"
			@regionchange="toRegionChange">
			<view>
				<div class="center">
					<u-button type='primary' v-if="isselect" style="z-index: 999;width: 60px;font-size: 15px;"
						@click="inselect">选定
					</u-button>
				</div>
				<image class="center1" v-if="isselect" src='https://project.gxrunxiang.com/cdn/location.png' style="width:50px;height: 50px;">
				</image>
			</view>
		</map>

		<image v-if="isimage" style="position:fixed ;right: 3vh;top: 5vh;z-index: 999;width: 40px;height: 40px;"
			@click="toggleimg" src='https://project.gxrunxiang.com/cdn/vec.jpg'></image>
		<image v-if="!isimage" style="position:fixed ;right: 3vh;top: 5vh;z-index: 999;width: 40px;height: 40px"
			@click="toggleimg" src='https://project.gxrunxiang.com/cdn/img.jpg'></image>

		<u-modal :show="showLegends" title="图例" :closeOnClickOverlay='true' @close="showLegends =!showLegends" @confirm="showLegends =!showLegends">
			<u-list height='300px'>
				<u-list-item>
					<u-cell title='巡检'>
						<u-avatar slot="icon" shape="square" size="35" :src="`https://project.gxrunxiang.com/cdn/icon.png`"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
					</u-cell>
				</u-list-item>
				<u-list-item>
					<u-cell title='抢修'>
						<u-avatar slot="icon" shape="square" size="35" :src="`https://project.gxrunxiang.com/cdn/pink.png`"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
					</u-cell>
				</u-list-item>
				<u-list-item>
					<u-cell title='整治'>
						<u-avatar slot="icon" shape="square" size="35" :src="`https://project.gxrunxiang.com/cdn/cyan.png`"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
					</u-cell>
				</u-list-item>
			</u-list>
		</u-modal>
		
		<u-popup :show="showpop" :round="20" mode="bottom" :closeable="true" :overlay="true" @close="close">
				<u-list height="500px" v-for="(item,index) in items" :key="index" style="width: 100%; margin-top:50px;">
					<u-cell-group style=' width: 100%;'>
						<u-cell icon="car" title="导航至此" isLink @click="gomap(item.Latlng)"
							style="margin-top: 20px;"></u-cell>
						<u-cell title="线路名称" :value="item.Name"></u-cell>
						<u-cell title="到机房的距离" :value="item.Length"></u-cell>
						<u-cell title="采集时间" :value="item.CreateTime"></u-cell>
						<u-cell title="备注" :value="item.Remark"></u-cell>
						<u-cell title="现场照片"></u-cell>
						<view>
							<u-album :urls="item.urls" keyName="src2"></u-album>
						</view>
						<u-cell title="敷设方式" :value="item.BuildType"></u-cell>
						<u-cell title="序号" :value="item.Idx"></u-cell>
						<u-cell title="坐标" :value="item.Latlng"></u-cell>
						<u-cell title="运维类型" :value="item.Type"></u-cell>
						<u-cell title="采集人" :value="item.Creator.Name"></u-cell>
					</u-cell-group>
					<u-button v-if="userinfo.Roles && userinfo.Roles.indexOf('管理员角色')>-1" type='error'
						@click="showconfirm=true">删除该点
					</u-button>
					<u-modal :content="'确定要删除吗？'" :show="showconfirm" showCancelButton closeOnClickOverlay
						@confirm="del(item.Id)" @cancel="showconfirm=false" @close="showconfirm=false"></u-modal>
				</u-list >
		</u-popup>
	</view>
</template>

<script>
	import {
		getlinelist,
		getfilebyoutid,
		deleteline,
		searchline,
	} from '@/common/api.js'
	import {
		baseUrl
	} from '@/common/config.js'
	import coordtransform from 'coordtransform'
	export default {
		data() {
			return {
				popdata: {},
				show: false,
				isimage: false,
				keyword: '',
				showpop: false,
				showsheet: false,
				showconfirm: false,
				showLegends: false,
				showLocate: false,
				seachlist: [],
				outdata: [],
				latitude: 22.56961,
				longitude: 108.1307,
				scale: 17,
				islocated: false,
				isselect: false,
				isloading: false,
				markers: [],
				urls: [],
				userinfo: {},
				items: [],
				mapContext: {},
				TagX: '',
				TagY: '',
				neLat: 0,
				neLng: 0,
				swLat: 180,
				swLng: 180,
				region: "",
				showLongitude: "",
				showLatitude: "",
				loading: false,
				isSearch:false,
				loadingPageData: {
					// 自定义提示内容
					loadingText: '',
					// 自定义图片
					image: '',
					// 自定义加载动画模式
					loadingMode: '',
					// 自定义背景色
					bgColor: '#ffffff',
				},
			}
		},
		methods: {
			//获取所有数据
			async getdata() {
				let para = {
					Parameters: [],
					orderBys: ["Idx"],
				}
				await getlinelist(this.region, para).then(res => {
					this.loading = false
					this.outdata = res.data;
					this.popdata = {}
					res.data.forEach(e => {
						this.popdata[e.MarkerId] = e;
					})
				})
			},
			//进入微信导航页面
			gomap(Latlon) {
				if (Latlon) {
					let latitude = parseFloat(Latlon.split(',')[0])
					let longitude = parseFloat(Latlon.split(',')[1])
					var lola = coordtransform.wgs84togcj02(longitude, latitude)
					uni.openLocation({
						latitude: lola[1],
						longitude: lola[0],
						success: function() {
							console.log('success');
						}
					});
				}
			},
			toggleimg() {
				this.isimage = !this.isimage
			},
			//查找方法
			search() {
				searchline(this.keyword).then(res => {
					this.seachlist = res
				})
			},
			//选择并跳转到地点
			goline(latlng) {
				this.isSearch = true
				let latitude = parseFloat(latlng.split(',')[0])
				let longitude = parseFloat(latlng.split(',')[1])
				var lola = coordtransform.wgs84togcj02(longitude, latitude)
				this.longitude = lola[0]
				this.latitude = lola[1]
				this.scale = 19
			},
			//设置地图上的点
			async setMarkers() {
				this.loading = true
				await this.getdata()
				this.outdata.forEach(e => {
					let latitude = parseFloat(e.Latlng.split(',')[0])
					let longitude = parseFloat(e.Latlng.split(',')[1])
					var lola = coordtransform.wgs84togcj02(longitude, latitude)
					let iconPath = ''
					if(!e.Type || e.Type == '巡检'){
						iconPath = 'https://project.gxrunxiang.com/cdn/icon.png'
					}else if(e.Type == '抢修'){
						iconPath = 'https://project.gxrunxiang.com/cdn/pink.png'
					}else if(e.Type == '整治'){
						iconPath = 'https://project.gxrunxiang.com/cdn/cyan.png'
					}
					this.markers.push({
						longitude: lola[0],
						latitude: lola[1],
						id: e.MarkerId,
						iconPath: iconPath,
						width: 22,
						height: 22
					})
				})
			},
			//点击地图上点的事件
			clickMarker(event) {
				console.log(event)
				this.items[0] = this.popdata[event.markerId] // this.outdata.find(item => item.Id === event.markerId)
				this.items[0].urls = []
				if (this.items[0].ImageList) {
					this.items[0].ImageList.forEach(e => {
						this.items[0].urls.push(`${baseUrl}/SysFile/download?id=${e.Id}`)
					})
				}
				this.showpop = true
			},
			//删除
			del(id) {
				// let p = [this.item.Id]
				let p = [id]
				deleteline(p).then(res => {
					this.getdata()
					this.showconfirm = false
					this.showpop = false
				})
			},
			//关闭详情
			close() {
				this.showpop = false;
			},
			//进入页面时获取当前位置
			outlocation() {
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				// 	success: (res) => {
				// 		// console.log("定位结果" + res.longitude + "，" + res.latitude)
				// 		// that.addrDel = res;		
				// 		var lola = coordtransform.wgs84togcj02(res.longitude, res.latitude)
				// 		this.longitude = lola[0]
				// 		this.latitude = lola[1]
				// 		this.islocated = true
				// 	},
				// 	fail: () => {
				// 		// this.outcenter = [111.11111, 11.111111]
				// 		// console.log("定位结果失败")
				// 		// console.log(this)
				// 		uni.showToast({
				// 			title: '获取地址失败，将导致部分功能不可用',
				// 			icon: 'none'
				// 		});
				// 	}
				// });
				wx.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: (res) => {
						// console.log("定位结果" + res.longitude + "，" + res.latitude)
						// that.addrDel = res;		
						// var lola = coordtransform.wgs84togcj02(res.longitude, res.latitude)
						this.longitude = res.longitude
						this.latitude = res.latitude
						this.islocated = true
					},
					fail: () => {
						// this.outcenter = [111.11111, 11.111111]
						// console.log("定位结果失败")
						// console.log(this)
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				})
			},
			//获取当前位置并且添加点
			setLocation() {
				this.isloading = true
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				// 	success: (res) => {
				// 		var lola = coordtransform.wgs84togcj02(res.longitude, res.latitude)
				// 		this.longitude = lola[0]
				// 		this.latitude = lola[1]
				// 		this.markers.push({
				// 			longitude: lola[0],
				// 			latitude: lola[1],
				// 			id: 'nowLocation',
				// 			iconPath: '/static/img/icon2.png',
				// 			width: 21,
				// 			height: 21
				// 		})
				// 		this.islocated = true
				// 		this.scale = 18
				// 		this.isloading = false
				// 	},
				// 	fail: () => {
				// 		uni.showToast({
				// 			title: '获取地址失败，将导致部分功能不可用',
				// 			icon: 'none'
				// 		});
				// 	},

				// });				
				wx.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: (res) => {
						// var lola = coordtransform.wgs84togcj02(res.longitude, res.latitude)
						this.longitude = res.longitude
						this.latitude = res.latitude
						this.markers.push({
							longitude: res.longitude,
							latitude: res.latitude,
							id: 'nowLocation',
							iconPath: '/static/img/icon2.png',
							width: 21,
							height: 21
						})
						this.islocated = true
						this.scale = 18
						this.isloading = false
					},
					fail: () => {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					},

				});
			},
			toLocate(e){
				 var i = [parseFloat(e.split(',')[0]), parseFloat(e.split(',')[1])]
				 this.longitude = parseFloat(e.split(',')[0])
				 this.latitude = parseFloat(e.split(',')[1])
			},
			//显示选定按钮和地图中心的图标
			toggleSelect() {
				this.isselect = !this.isselect
			},
			inselect() {
				//点击选定时获取当前地图中心的坐标,并进入页面
				this.mapContext = uni.createMapContext("maps", this);
				this.mapContext.getCenterLocation({
					type: 'gcj02',
					success: (res) => {
						var lola = coordtransform.gcj02towgs84(res.longitude, res.latitude)
						let i = lola[1] + "," + lola[0]
						uni.navigateTo({
							url: `point?latlng=${i}`
						})
					},
				})
			},
			toRegionChange(e) {
				console.log(e,'?',this.isSearch)
				this.mapContext = uni.createMapContext("maps", this);
				this.mapContext.getCenterLocation({
					success: res => {
						this.showLongitude = res.longitude
						this.showLatitude = res.latitude
					}
				})
				if (e.type == 'end') {
					this.mapContext = uni.createMapContext("maps", this);
					this.mapContext.getRegion({
						success: res => {
							if (this.loading == true)
								return;
							if(this.isSearch){
								this.neLat = res.northeast.latitude
								this.neLng = res.northeast.longitude
								this.swLat = res.southwest.latitude
								this.swLng = res.southwest.longitude
								var lola1 = coordtransform.gcj02towgs84(this.swLng, this.swLat)
								var lola2 = coordtransform.gcj02towgs84(this.neLng, this.neLat)
								this.region = lola1[0].toString() + ',' +
									lola1[1].toString() + ',' +
									lola2[0].toString() + ',' +
									lola2[1].toString();
								this.markers = [];
								this.setMarkers()
								this.isSearch = false
							}
							if (this.neLat >= res.northeast.latitude && this.neLng >= res.northeast.longitude &&
								this.swLat <= res.southwest.latitude && this.swLng <= res.southwest.longitude
								) {
								console.log('视图放大了');
							} else {
								if (this.neLat < res.northeast.latitude) {
									this.neLat = res.northeast.latitude
								}
								if (this.neLng < res.northeast.longitude) {
									this.neLng = res.northeast.longitude 
								}
								if (this.swLat > res.southwest.latitude) {
									this.swLat = res.southwest.latitude
								}
								if (this.swLng > res.southwest.longitude) {
									this.swLng = res.southwest.longitude 
								}
								var lola1 = coordtransform.gcj02towgs84(this.swLng, this.swLat)
								var lola2 = coordtransform.gcj02towgs84(this.neLng, this.neLat)
								this.region = lola1[0].toString() + ',' +
									lola1[1].toString() + ',' +
									lola2[0].toString() + ',' +
									lola2[1].toString();
								this.markers = [];
								this.setMarkers()
							}
						},
						fail: (data, code) => {
							console.log('fail' + JSON.stringify(data));
						}
					})
				}
			}
		},

		onShow() {
			this.userinfo = JSON.parse(uni.getStorageSync("$userinfo"))
			// this.setMarkers()
		},
		mounted() {
			this.outlocation()
		},
	}
</script>

<style>
	.center {
		position: absolute;
		width: 50px;
		height: 100px;
		left: 50%;
		top: 50%;
		margin-left: -25px;
		margin-top: -100px;
		z-index: 999;
	}

	.center1 {
		position: absolute;
		width: 50px;
		height: 50px;
		left: 50%;
		top: 50%;
		margin-left: -25px;
		margin-top: -50px;
		z-index: 999;
	}
</style>